<template>
  <v-chart :ref="refs"
           :theme="tdTheme"
           :autoresize="true"
           :options="polar" />
</template>

<script>
import 'echarts'
import ECharts from 'vue-echarts'
import tdTheme from './theme.json'
export default {
  name: 'Egraph',
  components: {
    'v-chart': ECharts
  },
  props: {
    seriesLinks: {
      type: Array,
      default () {
        return []
      }
    },
    seriesData: {
      type: Array,
      default () {
        return []
      }
    },
    categories: {
      type: Array,
      default () {
        return []
      }
    },
    refs: {
      type: String,
      default: ''
    },
    text: {
      type: String,
      default: ''
    },
    subText: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      tdTheme: tdTheme,
      polar: {}
    }
  },
  methods: {
    init () {
      const { seriesLinks, seriesData, categories } = this
      const option = {
        title: {
          text: this.text,
          subtext: this.subText
          // x: 'center'
        },
        legend: {
          left: 'right',
          bottom: 0,
          data: categories.map(function (a) {
            return a.name
          })
        },
        animationDuration: 1500,
        animationEasingUpdate: 'quinticInOut',
        grid: {
          top: 10,
          bottom: '10%',
          left: '10%',
          right: '10%'
        },
        tooltip: {},
        series: [
          {
            type: 'graph',
            layout: 'none',
            data: seriesData,
            links: seriesLinks,
            categories: categories,
            roam: true,
            focusNodeAdjacency: true,
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 1,
              shadowBlur: 10,
              shadowColor: 'rgba(0, 0, 0, 0.3)'
            },
            label: {
              position: 'right',
              formatter: '{b}'
            },
            lineStyle: {
              color: 'source',
              curveness: 0.3
            },
            emphasis: {
              lineStyle: {
                width: 10
              }
            }
          }
        ]
      }
      this.polar = option
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.init()
    })
  }
}
</script>
